<template>
    <div id="personPage">
        <mu-text-field
            v-model="weatherVal"
            label="关于天气你想搜点什么？"
            label-float
            @keyup.enter="toSearch('weather')"
        ></mu-text-field>
        <mu-expansion-panel v-for="item in weatherInfo" :key="item._id">
            <div slot="header">{{ item.date }}</div>
            {{ item.content }}
            <!-- <mu-button slot="action" flat>Cancel</mu-button>
            <mu-button slot="action" flat color="primary">Save</mu-button>-->
        </mu-expansion-panel>
        <mu-text-field
            v-model="movieVal"
            label="关于基金你想搜点什么？"
            label-float
            @keyup.enter="toSearch('fund')"
        ></mu-text-field>
        <mu-expansion-panel v-for="item in fundInfo" :key="item._id">
            <div slot="header">
                <span>{{ item.name }}</span>
                <span>{{ item.time }}</span>
            </div>
            <p>股票代码:{{ item.code }}</p>
            <p>持有基金家数:{{ item.fundnum }}</p>
            <p>持股总数（万股）:{{ item.total }}</p>
            <p>持股变化（和上季度比）:{{ item.change }}</p>
            <p>持股总市值（万元）:{{ item.totalcap }}</p>
            <p>占该股流通市值比例（%）:{{ item.accrate }}</p>
            <p>占流通股比例表变化（和上季度比）（%）:{{ item.changesta }}</p>
            <p>入库时间:{{ item.save_date }}</p>
            
        </mu-expansion-panel>
        <mu-text-field
            v-model="fundVal"
            label="关于电影你想搜点什么？"
            label-float
            @keyup.enter="toSearch('movie')"
        ></mu-text-field>
        <mu-expansion-panel v-for="item in movieInfo" :key="item._id">
            <div slot="header">
                {{ item.title }}
            </div>
            <div>链接:<a :href="item.url" target="_blank">点击由此去</a></div>
            <div>评分:{{ item.rate }}</div>
        </mu-expansion-panel>

    </div>
</template>

<script>
import { searchWeather, searchMovie,searchFund } from "@/api/api";
export default {
    name: "InfoService",
    data() {
        return {
            weatherInfo: [],
            fundInfo:[],
            movieInfo: [],
            weatherVal: "",
            fundVal:"",
            movieVal: "",
        };
    },
    computed: {},
    created() {},
    mounted() {
        this.getWeatherInfo();
        this.getFundInfo();
        //this.getMovieInfo();
        
    },
    methods: {
        getWeatherInfo(val) {
            searchWeather({ info: val })
                .then((res) => {
                    this.weatherInfo = res.data;
                })
                .catch((err) => {});
        },
        getMovieInfo(val) {
            searchMovie({ info: val })
                .then((res) => {
                    this.movieInfo = res.data;
                })
                .catch((err) => {});
        },
        getFundInfo(val) {
            searchFund({ info: val ,page:0,limit:20})
                .then((res) => {
                    this.fundInfo = res.data;
                })
                .catch((err) => {});
        },
        toSearch(type) {
            switch (type) {
                case "weather":
                    this.getWeatherInfo(this.weatherVal);
                    break;
                case "movie":
                    this.getMovieInfo(this.movieVal);
                    break;
                case "fund":
                    this.getFundInfo(this.movieVal);
                    break;
            }
        },
    },
    watch: {
        /* "$store.states.searchVal": function (val) {
            console.log(val);
            this.getInfo(val);
        }, */
    },
};
</script>

<style>
</style>